<template>
    <div class="m-hmhot">
        <div class="hotop">
            <div class="hotopct">
                <div class="u-hmsprt hoticon"></div>
                <div class="hottime">更新日期:12月8日</div>
            </div>
        </div>
        <div class="hotcont">
            <div class="m-sglst" v-for="(item, index) in hotData" :key="index">
                <a class="m-sgitem" href="">
                    <div class="sgfl sgfl-cred">{{ index + 1 }}</div>
                    <div class="sgfr f-bd f-bd-btm">
                        <div class="sgchfl">
                            <div class="f-thide sgtl">{{ item.songname
                            }}</div>
                            <div class="f-thide sginfo">
                                <i class="u-hmsprt sghot"></i>{{ item.alname }}



                            </div>
                        </div>
                        <div class="sgchfr">
                            <span class="u-hmsprt sgchply"></span>
                        </div>

                    </div>
                </a>
            </div>
        </div>

    </div>
</template>

<script>

export default {
    
    data() {
        return {
            listData: "",
            hotData: [], //热歌数据1
        };
    },
    created() {
        this.getHotSongListData();
    },
    methods: {
        getHotSongListData() {
            this.$request("get", "/toplist/detail").then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.hotsongid = res.list[3].id;
                    console.log("热歌榜id:", this.hotsongid);
                    this.$request("get", "/playlist/track/all?id=" + this.hotsongid + "&limit=20&offset=0").then((res) => {
                        console.log("热歌榜:", res.songs);
                        if (res.code == 200) {
                            for (let i = 0; i < res.songs.length; i++) {
                                let hotData = {};
                                hotData.songname = res.songs[i].name; //歌名
                                hotData.name = res.songs[i].ar[0].name; //人名
                                hotData.alname = res.songs[i].al.name; //专辑名
                                hotData.id = res.songs[i].id;
                                hotData.picurl = res.songs[i].al.picUrl;
                                this.hotData.push(hotData);
                            }
                        }
                    });
                }
            });
        }

        
        
    },

}

</script>

<style>
body,
html {
    height: 100%;
    width: 100%;
    -webkit-text-size-adjust: 100%
}

body,
button,
input,
keygen,
legend,
select,
textarea {
    font: 14px/1.5 Helvetica, sans-serif, STHeiTi;
    color: #333;
    outline: 0;
}

div {
    display: block;
}

blockquote,
body,
button,
caption,
dd,
div,
dl,
dt,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
input,
legend,
li,
menu,
ol,
p,
pre,
table,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0;
}

.m-hmhot .hotop {
    position: relative;
    padding-top: 38.9%;
    overflow: hidden;
    background: url(https://s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee=);
    background-size: contain;
}

.m-hmhot .hotop:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, .2);
}

.m-hmhot .hotopct {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    padding-left: 20px;
    box-sizing: border-box;
}

.m-hmhot .hoticon {
    width: 142px;
    height: 67px;
    background-position: -30px -30px;
}

.u-hmsprt {
    background: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=) no-repeat;
    background-size: 166px 97px;
}

.m-hmhot .hottime {
    margin-top: 10px;
    color: hsla(0, 0%, 100%, .8);
    font-size: 12px;
    -webkit-transform: scale(.91);
    -ms-transform: scale(.91);
    transform: scale(.91);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    text-align: left;
}

.m-hmhot .hotcont {
    position: relative;
}

.m-sglst {
    position: relative;
}

a,
a:visited {
    color: #333;
}

a {
    text-decoration: none;
}

a,
button {
    cursor: pointer;
}

.m-sgitem,
.m-sgitem .sgfl {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.m-sgitem {
    padding-left: 10px;
}



.m-sgitem .sgfl {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 40px;
    font-size: 17px;
    /* color: #999; */
    margin-left: -10px
}

.m-sgitem .sgfl-cred {
    color: #df3436;
}

.m-sgitem,
.m-sgitem .sgfl {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.m-sgitem .sgchfl,
.m-sgitem .sgfr {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.m-sgitem .sgfr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    text-align: left;
}

.f-bd {
    position: relative;
}

.m-sgitem .sgchfl {
    padding: 6px 0;
    width: 0;
}

.m-sgitem .sgtl {
    font-size: 17px;
}

.f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}

.m-sgitem .sginfo {
    font-size: 13px;
    color: #888;
}

.m-sgitem .sghot {
    display: inline-block;
    width: 12px;
    height: 8px;
    margin-right: 4px;
}

.u-hmsprt {
    background: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=) no-repeat;
    background-size: 166px 97px;
}

.m-sgitem .sgchfr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 15px;
}

.m-sgitem .sgchply {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-position: -24px 0;
}

.u-hmsprt {
    background: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=) no-repeat;
    background-size: 166px 97px;
}
</style>